import React, { useState } from 'react';
import './yundong.css';
import { Input, Form, Button, Cascader } from 'antd-mobile';
import { LeftOutline } from 'antd-mobile-icons';
import { useNavigate } from "react-router-dom";

// Sample province/city/district data
const options = [
    {
        label: '北京市',
        value: 'beijing',
        children: [
            {
                label: '北京市',
                value: 'beijing_city',
                children: [
                    {
                        label: '东城区',
                        value: 'dongcheng'
                    },
                    {
                        label: '西城区',
                        value: 'xicheng'
                    }
                ]
            },
            {
                label: '海淀区',
                value: 'haidian',
                children: [
                    {
                        label: '中关村街道',
                        value: 'zhongguancun'
                    },
                    {
                        label: '上地街道',
                        value: 'shangdi'
                    }
                ]
            }
        ]
    },
    {
        label: '上海市',
        value: 'shanghai',
        children: [
            {
                label: '上海市',
                value: 'shanghai_city',
                children: [
                    {
                        label: '黄浦区',
                        value: 'huangpu'
                    },
                    {
                        label: '徐汇区',
                        value: 'xuhui'
                    }
                ]
            },
            {
                label: '浦东新区',
                value: 'pudong',
                children: [
                    {
                        label: '陆家嘴街道',
                        value: 'lujiazui'
                    },
                    {
                        label: '花木街道',
                        value: 'huamu'
                    }
                ]
            }
        ]
    }
];

function Address() {
    const [visible, setVisible] = useState(false);
    const [selectedAddress, setSelectedAddress] = useState([]);
    const navigate = useNavigate();

    const handleAddressChange = (value) => {
        setSelectedAddress(value);
        setVisible(false); // Hide the Cascader after selection
    };

    return (
        <div>
            <div className='y_one'>
                <p style={{ marginTop: '3px' }} onClick={() => navigate('/yundong')}>
                    <LeftOutline fontSize={24} />
                </p>
                <h2>添加地址</h2>
            </div>
            <div className='q_shu'>
                <Form.Item label='用户名' name='username'>
                    <Input placeholder='请输入用户名' clearable />
                </Form.Item>
            </div >
        <div>
            <Button onClick={() => setVisible(true)}>选择地址</Button>
            <Cascader
                options={options}
                visible={visible}
                onClose={() => setVisible(false)}
                onChange={handleAddressChange}
            />
        </div>
    {
        selectedAddress.length > 0 && (
                <div>
                    <p>选择的地址：{selectedAddress.join(' / ')}</p>
                </div >
            )
    }
            
        </div >

    );
}

export default Address;
